Top React Hooks — Helper Hooks

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

React Pirate

React Pirate is a library with various hooks we can use.

To install it, we can run:

npm install react-pirate

or:

yarn add react-pirate

It comes with various hooks, including the usePrevious hook to get the previous value of a state.

Then we can use it by writing:

import React from "react";
import { usePrevious } from "react-pirate";

export default function App() {
  const [count, setCount] = React.useState(0);
  const prevCount = usePrevious(count);

  return (
    <div>
      <button onClick={() => setCount(count => count + 1)}>increment</button>
      <p>
        {count} {prevCount}
      </p>
    </div>
  );
}

The usePrevious hook lets us get the previous value of a state.

We just pass in the count hook to the usePrevious hook.

It returns the previous value of count .

The useToggle hook lets us create a boolean state and toggle it.

For instance, we can write:

import React from "react";
import { useToggle } from "react-pirate";

export default function App() {
  const { value, toggle } = useToggle(false);

  return (
    <div>
      <button onClick={toggle}>toggle</button>
      <p>{value.toString()}</p>
    </div>
  );
}

to use the useToggle hook.

The hook takes a boolean as an argument.

It’s used as the initial value.

It returns an object with the value and toggle properties.

value has the value of the boolean.

toggle lets us toggle value .

The useMount hook lets us run code when the component is mounted.

For example, we can write:

import React, { useLayoutEffect } from "react";
import { useMount } from "react-pirate";

export default function App() {
  useMount(
    () => {
      console.log("mounted");
    },
    { hook: useLayoutEffect }
  );

  return <p>hello</p>;
}

We use the useMount hook with a callback in the first argument that runs when the component is mounted.

It does similar things to the componentDidMount method.

It also comes with ane equivalent to the componentDidUpdate method.

For example, we can write:

import React from "react";
import { useUpdate } from "react-pirate";

export default function App() {
  const [count, setCount] = React.useState(0);

  useUpdate(() => {
    console.log("updated");
  });

  return (
    <>
      <button onClick={() => setCount(count => count + 1)}>increment</button>
      <p>{count}</p>
    </>
  );
}

We added the useUpdate hook with a callback that runs when the count state is updated.

It also comes with the useUnmount hook that takes a callback that runs a component unmounts.

We can use that by writing:

import React from "react";
import { useUnmount } from "react-pirate";

export default function App() {
  useUnmount(() => {
    console.log("unmount");
  });

  return <></>;
}

react-powerhooks

The react-powerhooks library comes with various hooks that we can use in our app.

To install it, we run:

yarn add react-powerhooks

Then we can use the hooks that it comes with.

For instance, we can use the useToggle hook by writing:

import React from "react";
import { useToggle } from "react-powerhooks";

export default function App() {
  const [value, toggle] = useToggle(true);

  return (
    <>
      <button onClick={() => toggle()}>toggle</button>
      <p>{value.toString()}</p>
    </>
  );
}

We use the useToggle hook in our component.

It takes an argument for the initial value.

It returns an array with the value as the value variable.

toggle is the function to toggle value .

It comes with many more hooks to help us.

Conclusion

React Pirate and react-powerhooks both provide us many helper hooks.